<template>
<view class="userinfo">
	<view class="useravatar">
		<u-upload :show-upload-list="false" :show-progress="false" :action="action":to-json="false"  @on-change="uploaded"  name="avatar" :header="header"  :auto-upload="true"   :custom-btn="true" ref="uUpload"> 
			<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				<u-avatar  :src="'http://www.travelapi.com/storage/'+ formData.avatar" size="140"></u-avatar>	
				<view>
					点击修改头像
				</view>
			</view>
		</u-upload>
			
	</view>
	<u-form :model="formData" ref="uForm" :error-type="errorType">
		<u-form-item label="昵称" prop="nickname"><u-input v-model="formData.nickname" /></u-form-item>
		<u-form-item prop="gender" label="性别">
			<u-radio-group v-model="formData.gender">
				<u-radio  name="2">男</u-radio>
				<u-radio  name="1">女</u-radio>
				<u-radio  name="0">保密</u-radio>
			</u-radio-group>
		</u-form-item>

		<u-form-item   label="余额"><u-input :disabled="true" v-model="formData.amount" /></u-form-item>
		<u-form-item  prop="phone" label="手机"><u-input :disabled="true" v-model="formData.phone" /></u-form-item>
	</u-form>
	<u-button  @click="submit">提交</u-button>
</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				nickname: '',
				gender: 0,
				avatar:''
			},
			errorType: ['toast'],
			rules: {
				nickname: [
					{ 
						required: true, 
						message: '请输入昵称', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				gender: [
					{
						required: true,
						message: '性别有误', 
						trigger: 'change'
					}
				]
		
			},
			header:{
				"token":uni.getStorageSync("userkey")["token"]
			},
			// #ifdef APP-PLUS||H5
			action:"/api/user/updateAvatar"
			// #endif
			
			// #ifdef MP-WEIXIN
			action:"http://www.travelapi.com/api/user/updateAvatar"
			// #endif
			
		};
	},
	methods:{
		
		submit() {
			var that = this
			this.$refs.uForm.validate(async valid => {
				if (valid) {
					var data = {
						nickname: that.formData.nickname,
						gender: that.formData.gender,
					}
					var upuserinfo = await that.$u.proxy.user.upUserInfo(data)
					
					if(upuserinfo.success){
					  uni.showToast({
						icon: 'none',
						title: upuserinfo.msg,
						duration:50000,
						success() {
							setTimeout(()=>{
								that.$u.route({
									
									type:"reLaunch",
									 
									url: 'pages/my/my',
									
								})								
							},1000)
						}
					  });
					  
					}else{
						
					  uni.showToast({
						icon: 'none',
						title: upuserinfo.msg
					  });
					}
					return false
				}
			});
		},
		uploaded(e){
			let data = JSON.parse(e.data)
			if(data.success){
				  uni.showToast({
					icon: 'none',
					title: data.msg
				  });
				  this.formData.avatar = data.data
			}else{
				
				  uni.showToast({
					icon: 'none',
					title: data.msg
				  });
			}
		}
		
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	async onLoad() {
		let userinfo = await this.$u.proxy.user.userinfo()
		this.formData = userinfo.data
	}
};

</script>

<style scoped>
	.userinfo{
		width: 90%;
		text-align: center;
		margin: 0 auto;
	}
	.useravatar{
		display: inline-block;
		padding: 15rpx 0;
	}

</style>
